
<script setup lang="ts">
import { onBeforeMount, getCurrentInstance, ref, reactive } from 'vue';
let { proxy }: any = getCurrentInstance();
// 获取路由传值
onBeforeMount(() => {
  console.log(proxy.$route.query);
});

// 表单数据
const from = reactive({
  username: '', //用户名
  truename: '', //真实姓名
  id: null, //工号
  phone: null, //联系电话
  status: 1, //状态
  organization: null, //所属机构
  department: null, //所属部门
  role: null //用户角色
});
const rules = reactive({
  username: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ]
});
</script>



<template id="Save">
  <div class="header">
    <div class="headerBox1">
      <el-link :underline="false" @click="proxy.$router.back()">
        <el-icon><Back /></el-icon>返回</el-link
      >
    </div>
    <div class="headerBox2">用户信息</div>
  </div>
  <div class="from">
    <el-form :model="from" :rules="rules">
      <el-form-item label="用户名" label-width="100px" prop="username">
        <el-input placeholder="请输入用户名" v-model="from.username"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" label-width="100px">
        <el-input placeholder="请输入真实姓名" v-model="from.truename"></el-input>
      </el-form-item>
      <el-form-item label="工号" label-width="100px">
        <el-input placeholder="请输入工号" v-model="from.id"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" label-width="100px">
        <el-input placeholder="请输入连电话" v-model="from.phone"> </el-input>
      </el-form-item>
      <el-form-item prop="status" label="状态" label-width="100px">
        <el-radio-group v-model="from.status">
          <el-radio :label="1">备选项</el-radio>
          <el-radio :label="2">备选项</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属机构" label-width="100px">
        <el-select v-model="from.organization" placeholder="请选择所属机构">
          <el-option label="济南" value="济南"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属部门" label-width="100px">
        <el-radio-group v-model="from.status">
          <el-radio :label="1">备选项</el-radio>
          <el-radio :label="2">备选项</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户角色" label-width="100px">
        <el-radio-group v-model="from.status">
          <el-radio :label="1">备选项</el-radio>
          <el-radio :label="2">备选项</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button class="saveBtn" type="primary">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<style  scoped>
:deep(#layout .el-main) {
  background-color: #fff !important;
}
.header {
  display: flex;
  width: calc(100% - 70px);
  height: 40px;
  background-color: #fff;
  padding: 10px;
}
.headerBox1 {
  width: 60px;
  border-right: 1px solid #ccc;
  height: 19px;
  line-height: 19px;
  margin-top: 10px;
}
.headerBox2 {
  width: 70px;
  padding-left: 10px;
  height: 19px;
  line-height: 19px;
  margin-top: 10px;
}
.from {
  margin-left: 100px;
  width: 350px;
  margin-top: 16px;
}
.saveBtn {
  margin: 0 auto;
}
</style>>

